<template>
  <view class="list">
    <view class="item" v-for="(item, idx) in list" :key="idx">
      <view class="left">
        <view class="circle"></view>
      </view>
      <view class="right">
        <view class="title">
          {{ item.title }}
        </view>

        <view class="content">
          <view class="text" v-if="item.content.type === 'text'">
            {{ item.content.value }}
          </view>
          <view class="image" v-if="item.content.type === 'image'">
            <image
              v-show="img != ' ' && img != '-' && img != null"
              @click="previewImage(img,idx2)"
              mode="aspectFill"
              radius="14rpx"
              width="294rpx"
              height="200rpx "
              v-for="(img, idx2) in item.content.value[0].url"
              :key="idx2"
              :src="img"
            ></image>
          </view>
          <view class="video" v-if="item.content.type === 'video'">
            <text
              v-for="(video, idx2) in item.content.value"
              :key="idx2"
              @click="palyVideo(video.url)"
            >
              <image
                v-show="
                  video.url != '' && video.url != null && video.url != undefined
                "
                style="width: 50%; height: 100px;"
                src="../../src/imgs/bf.png"
                mode="aspectFill"
              ></image>
            </text>
          </view>
          <view class="record" v-if="item.content.type === 'audio'">
            <view v-for="(audio, idx2) in item.content.value" :key="idx2">
              <view class="audio" @click="playAudio(audio.url)">
                <view class="audio-control">
                  <text
                    class="iconfont icon-24gf-play"
                    v-if="audioState === 2 || audioState === 0"
                  ></text>
                  <text
                    class="iconfont icon-24gf-pause2"
                    v-if="audioState === 1"
                  ></text>
                </view>
              </view>
              <view class="audio audio-stop" @click="stop()">
                <view class="audio-center"></view>
              </view>
              <view class="slide">
                <u-slider
                  @change="stepAudio"
                  v-model="audioCurrentTime"
                  :min="0"
                  :max="audioDuration.toFixed(0)"
                ></u-slider>
              </view>
              <view class="time">{{ Math.round(audioCurrentTime) }}s</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let innerAudioContext = "";
export default {
  name: "tineLine",
  data() {
    return {
      audioState: 0,
      audioDuration: 10,
      audioCurrentTime: 0,
    };
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    is_high_risk: {
      type: String,
      default() {
        return "是";
      },
    },
  },
  onHide() {
    if (innerAudioContext) {
      this.stop();
    }
  },
  beforeDestroy() {
    if (innerAudioContext) {
      this.stop();
    }
  },
  methods: {
    palyVideo(url) {
      uni.navigateTo({
        url: "/pages/common/video_player/index?url=" + url,
      });
    },
    previewImage(url,idx) {
		let img =[]
		this.list.map(item=>{
			if(item.content.type=="image"){
				img=item.content.value[0].url
			}
		})
      uni.previewImage({
		  current: idx,
		  urls: img,
		  indicator: 'number',
		  loop: true,
      });
    },
    playAudio(url) {
      if (this.audioState === 0) {
        innerAudioContext = uni.createInnerAudioContext();
        innerAudioContext.autoplay = true;
        innerAudioContext.src = url;
        innerAudioContext.onPlay(() => {
          console.log("开始播放");
          console.log(innerAudioContext);
        });
        innerAudioContext.onError((res) => {
          console.log(res.errMsg);
          console.log(res.errCode);
        });
        innerAudioContext.onTimeUpdate(() => {
          if (!Number.isFinite(innerAudioContext.duration)) {
            innerAudioContext.currentTime = Number.MAX_SAFE_INTEGER;
            innerAudioContext.currentTime = 0;
          } else {
            this.audioDuration = innerAudioContext.duration;
            this.audioCurrentTime = innerAudioContext.currentTime;
          }
        });
        this.audioState = 1;
      } else if (this.audioState === 1) {
        this.pause();
        this.audioState = 2;
      } else if (this.audioState === 2) {
        this.play();
        this.audioState = 1;
      }
    },
    stepAudio(e) {
      let paused = innerAudioContext.paused;
      innerAudioContext.pause();
      innerAudioContext.seek(e);
      if (!paused) {
        innerAudioContext.play();
      }
    },
    play() {
      innerAudioContext.play();
    },
    pause() {
      innerAudioContext.pause();
    },
    stop() {
      innerAudioContext.stop();
      this.audioState = 2;
    },
  },
};
</script>
//
<script module="echarts" lang="renderjs">
// 	let myChart
// 	let myChart2
// 	export default {
// 		mounted() {
// 			if (typeof window.echarts === 'function') {
// 				this.initEcharts()
// 			} else {
// 				// 动态引入较大类库避免影响页面展示
// 				const script = document.createElement('script')
// 				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
// 				script.src = 'https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/tcplayer.v4.5.1.min.js'
// 				script.onload = this.initEcharts.bind(this)
// 				document.head.appendChild(script)
// 			}
// 		},
// 		methods: {
// 			initEcharts() {
// 				var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
// 				player.src(url); // url 播放地址
// 			},
// 			updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 				let timer = setInterval(() => {
// 					if (myChart) {
// 						myChart.setOption(newValue)
// 						clearInterval(timer);
// 						timer = null;
// 					}
// 				}, 100);
// 			},
// 		}
// 	}
//
</script>
<style lang="scss" scoped>
.list {
  width: 100%;
  box-sizing: border-box;
  .item {
    width: 100%;
    min-height: 110rpx;
    @include clear();
    position: relative;
    &:last-child {
      .left {
        &::before {
          display: none;
        }
      }
    }
    .left {
      float: left;
      width: 20rpx;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      &::before {
        content: "";
        width: 1rpx;
        height: 100%;
        position: absolute;
        left: 10rpx;
        top: 20rpx;
        border-left: 1rpx dashed #0036df;
      }
      .circle {
        width: 20rpx;
        height: 20rpx;
        background-color: #0036df;
        border: solid 1rpx #ffffff;
        border-radius: 50%;
      }
    }
    .right {
      float: left;
      margin-left: 45rpx;
      width: calc(100% - 20rpx - 25rpx);
      .title {
        line-height: 30rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #7f98ae;
        margin-bottom: 10rpx;
      }
      .content {
        width: 100%;
        margin-bottom: 40rpx;
        .text {
          word-wrap: break-word;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30rpx;
          letter-spacing: 0rpx;
          color: #46464a;
        }
        .image {
          width: 100%;
          display: flex;
          /deep/ .u-fade-enter-active {
            background-color: rgba(0, 0, 0, 0) !important;
          }
          image {
            width: 200rpx;
            height: 150rpx;
            margin-bottom: 30rpx;
			opacity:1 !important
          }
        }
		
	 ::v-deep  uni-image>img{
			opacity:1 !important
		}
        
		.video {
          width: 100%;
          text {
            @include font-normal;
            color: #0036df;
            word-break: break-all;
            line-height: 30rpx;
          }
        }
        .record {
          width: 100%;
          @include clear();
          .audio {
            width: 50rpx;
            height: 50rpx;
            background-color: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
            overflow: hidden;
            margin-right: 50rpx;
            float: left;
            .audio-center {
              margin-top: 13rpx;
              margin-left: 13rpx;
              border-radius: 50%;
              width: 24rpx;
              height: 24rpx;
              background-color: #ed451b;
            }
            .audio-control {
              width: 100%;
              height: 100%;
              position: relative;
              text {
                width: 30rpx;
                height: 30rpx;
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                font-size: 30rpx;
                color: #ed451b;
              }
            }
            .audio-center__on {
              animation: scale 2s infinite;
            }
            .audio-center__fin {
              background-color: rgba(0, 0, 0, 0.5);
            }
            @keyframes scale {
              0% {
                transform: scale(1);
                opacity: 1;
              }
              50% {
                transform: scale(1.5);
                opacity: 0.5;
              }
              100% {
                transform: scale(1);
                opacity: 1;
              }
            }
          }
          .audio-stop {
            .audio-center {
              border-radius: 5rpx;
              background-color: #333;
            }
          }
          .slide {
            float: left;
            width: calc(100% - 280rpx);
            padding-top: calc((50rpx - 18px) / 2);
            /deep/ uni-slider {
              margin: 0;
            }
          }
          .time {
            width: 80rpx;
            float: left;
            height: 50rpx;
            line-height: 50rpx;
            text-align: right;
            @include font-normal();
          }
        }
      }
    }
  }
}
</style>
